﻿<UserControl  x:Class="TrailMapManager.Modules.Track.View.TrackMainView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d"
             xmlns:bing="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
             xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
             d:DesignHeight="500" d:DesignWidth="500" Loaded="UserControl_Loaded_1"
             xmlns:converters="clr-namespace:TrailMapManager.Common.Converters;assembly=Common">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/ModernControls;component/Style.xaml"/>
                <ResourceDictionary>
                    <converters:DistanceConverter x:Key="distConv"/>
                    <Style x:Key="trackListItemStyle" TargetType="{x:Type ListBoxItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                    <Grid Height="50" Margin="0,2,0,2">
                                        <Grid.Background>
                                            <SolidColorBrush x:Name="bgBrush"/>
                                        </Grid.Background>
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Selected">
                                                    <Storyboard>
                                                        <ColorAnimation Storyboard.TargetName="bgBrush"
                                                            Storyboard.TargetProperty="Color"
                                                            To="{StaticResource AppBaseLightColor}"
                                                            Duration="00:00:00.2"/>
                                                        <ColorAnimation Storyboard.TargetName="dateBgBrush"
                                                            Storyboard.TargetProperty="Color"
                                                            To="{StaticResource AppAlter2Color}"
                                                            Duration="00:00:00.2"/>
                                                    </Storyboard>
                                                </VisualState>

                                                <VisualState x:Name="Normal">
                                                    <Storyboard>
                                                        <ColorAnimation Storyboard.TargetName="bgBrush"
                                                            Storyboard.TargetProperty="Color"
                                                            To="{StaticResource AppBaseLightestColor}"
                                                            Duration="00:00:00.2"/>
                                                        <ColorAnimation Storyboard.TargetName="dateBgBrush"
                                                            Storyboard.TargetProperty="Color"
                                                            To="{StaticResource AppAlter2LightestColor}"
                                                            Duration="00:00:00.2"/>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="MouseOver">
                                                    <Storyboard>
                                                        <ColorAnimation Storyboard.TargetName="bgBrush"
                                                            Storyboard.TargetProperty="Color"
                                                            To="{StaticResource AppBaseLightColor}"
                                                            Duration="00:00:00.2"/>
                                                        <ColorAnimation Storyboard.TargetName="dateBgBrush"
                                                            Storyboard.TargetProperty="Color"
                                                            To="{StaticResource AppAlter2LightColor}"
                                                            Duration="00:00:00.2"/>
                                                    </Storyboard>
                                                </VisualState>
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50"/>
                                            <ColumnDefinition />
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <Grid Grid.Column="0"
                                              Grid.RowSpan="2">
                                            <Grid.Background>
                                                <SolidColorBrush x:Name="dateBgBrush"/>
                                            </Grid.Background>
                                            <TextBlock Text="{Binding Month}"
                                                       HorizontalAlignment="Center"
                                                       VerticalAlignment="Top"
                                                       Margin="0,2,0,0"
                                                       Foreground="White"/>
                                            <TextBlock Text="{Binding Day}"
                                                       HorizontalAlignment="Center"
                                                       VerticalAlignment="Bottom"
                                                       Margin="0,0,0,2"
                                                       FontSize="28"
                                                       FontFamily="Segoe UI Light"
                                                       Foreground="White"/>


                                        </Grid>

                                        <TextBlock Text="{Binding Name}"
                                                   Grid.RowSpan="2"
                                                   HorizontalAlignment="Left"
                                                   VerticalAlignment="Center"
                                                   TextWrapping="Wrap"
                                                   TextTrimming="WordEllipsis"
                                                   FontSize="22"
                                                   Margin="5,0,0,0"
                                                   Grid.Column="1"
                                                   Foreground="Black"
                                                   FontFamily="Segoe UI Light"/>

                                        <TextBlock Text="{Binding Duration}"
                                                   Grid.Column="2"
                                                   Foreground="Black"
                                                   HorizontalAlignment="Right"
                                                   VerticalAlignment="Center"
                                                   Margin="0,0,5,0"
                                                   Grid.Row="0"/>
                                        <TextBlock Text="{Binding Distance, Converter={StaticResource distConv}}"
                                                   Grid.Column="2"
                                                   Foreground="Black"
                                                   VerticalAlignment="Center"
                                                   HorizontalAlignment="Right"
                                                   Margin="0,0,5,0"
                                                   Grid.Row="1"/>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    
    <Grid Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.5*"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition Height="0.4*"/>
        </Grid.RowDefinitions>

        <!--TrackFiles-->
        <Grid Grid.Column="0">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition Height="50"/>
            </Grid.RowDefinitions>
            <ListBox ItemsSource="{Binding TrailTrackMan.Tracks}" 
                      SelectedItem="{Binding SelectedTrack, Mode=TwoWay}"
                      ScrollViewer.CanContentScroll="False"
                      HorizontalContentAlignment="Stretch"
                      Margin="2,0,2,0"
                      BorderThickness="0"
                      ItemContainerStyle="{StaticResource trackListItemStyle}">
            </ListBox>

            <!--Controls-->
            <Grid Grid.Row="1"
                  Background="{StaticResource AppAlter1LightestBrush}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                <Button Grid.Column="0"
                        Content="export"
                        FontSize="16"
                        Command="{Binding ExportCommand}" />
                <Button Grid.Column="1"
                        Content="delete"
                        FontSize="16"
                        Command="{Binding DeleteTrackCommand}"/>
            </Grid>
        </Grid>

        <!--BingMapView-->
        <Grid Grid.Column="1">
            <bing:Map CredentialsProvider="Aoa1v3rq4CwdNXLnP7PaD2mQB7ZeX_RRVhgh57nJHW-TRicViXcasM8XLenxnVKK"
                      Center="{Binding MapCenter, Mode=TwoWay}"
                      Mode="AerialWithLabels">
                <bing:MapPolyline Locations="{Binding TrackPoints}" Stroke="Red" StrokeThickness="2" />
                <bing:Pushpin Location="{Binding MarkerLocation}" Width="220" Height="60" >
                    <bing:Pushpin.Template>
                        <ControlTemplate>

                                <Grid Margin="110,0,0,0">
                                    <Path Data="M 0,60 L 0,0 L 220,0 L 220,40 L 20,40"
                                      Fill="#88000000"   
                                      Stroke="Black"
                                      StrokeThickness="1"/>
                                    <Grid Height="40" VerticalAlignment="Top">
                                        <Grid.RowDefinitions>
                                            <RowDefinition />
                                            <RowDefinition />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="50"/>
                                            <ColumnDefinition />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Text="speed:"
                                               HorizontalAlignment="Right"
                                               Margin="2" 
                                               Foreground="White"/>
                                        <TextBlock Text="{Binding MarkerSpeedText}" 
                                               Margin="2"
                                               Grid.Column="1"
                                               Foreground="White"/>

                                        <TextBlock Text="altitude:" 
                                               Margin="2"
                                               HorizontalAlignment="Right"
                                               Grid.Row="1"
                                               Foreground="White"/>
                                        <TextBlock Text="{Binding MarkerAltitudeText}" 
                                               Margin="2"
                                               Grid.Row="1"
                                               Grid.Column="1"
                                               Foreground="White"/>
                                    </Grid>
                                </Grid>

                            
                        </ControlTemplate>
                    </bing:Pushpin.Template>
                </bing:Pushpin>

            </bing:Map>
        </Grid>

        <d3:ChartPlotter 
            Grid.Row="1" 
            Grid.ColumnSpan="2" 
            x:Name="chart" ForceCursor="True">
            <d3:ChartPlotter.HorizontalAxis>
                <d3:HorizontalDateTimeAxis Name="dateTimeAxis"/>
            </d3:ChartPlotter.HorizontalAxis>
            <d3:CursorCoordinateGraph x:Name="cursorGraph"  />
        </d3:ChartPlotter>
       
    </Grid>
</UserControl>
